<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
      <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }">
        <view class="box">
          <view class="left-icon" @click="goBack">
            <uni-icons type="left" size="24"></uni-icons>
          </view>
          <view class="title">智能助手</view>
          <view class="right-icons">
            <uni-icons type="list" size="24" @click="toggleDrawer"></uni-icons>
            <uni-icons type="trash" size="24" @click="clearChat"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 填充区域 -->
    <view class="fill" :style="{ height: getNavBarHeight() + 'px' }"></view>

    <!-- 聊天内容区域 -->
    <scroll-view
      class="chat-container"
      scroll-y
      :scroll-top="scrollTop"
      ref="scrollView"
      style="overflow-y: hidden;"
      scroll-with-animation
      enable-back-to-top
      lower-threshold="50"
      upper-threshold="50"
    >
      <view class="chat-content">
        <view v-for="(msg, index) in messages" :key="msg.id">
          <!-- AI消息盒子 -->
          <view v-if="msg.type === 0" class="message-box ai">
            <view class="avatar-container" v-if="msg.content != null">
              <image class="avatar" src="/static/agent/agent.jpg" />
            </view>
            <view class="bubble-container" v-if="msg.content != null">
              <view class="bubble">
                <text>{{ msg.content }}</text>
                <!-- 加载状态 -->
                <view v-if="msg.loading" class="rotating-icon"></view>
                <!-- 错误状态 -->
                <view v-if="msg.error" class="error-tip">⚠️</view>
              </view>
              <view class="ai-icons" v-if="!msg.loading">
                <uni-icons type="sound" size="24" color="#666" @click="handleSoundIconClick(msg, index)"></uni-icons>
                <uni-icons
                  type="hand-up"
                  size="24"
                  :color="msg.handUpClicked ? '#1890ff' : '#666'"
                  @click="handleHandUpIconClick(msg, index)"
                  :disabled="msg.handUpClicked || msg.handDownClicked"
                ></uni-icons>
                <uni-icons
                  type="hand-down"
                  size="24"
                  :color="msg.handDownClicked ? '#ff4d4f' : '#666'"
                  @click="handleHandDownIconClick(msg, index)"
                  :disabled="msg.handUpClicked || msg.handDownClicked"
                ></uni-icons>
                <uni-icons type="paperclip" size="24" color="#666" @click="handleAttachmentIconClick(msg, index)"></uni-icons>
              </view>
            </view>
          </view>

          <!-- 用户消息盒子 -->
          <view v-else class="message-box user">
            <view v-if="!msg.image && !msg.audio" class="bubble-container">
              <view class="bubble">
                <text>{{ msg.content }}</text>
              </view>
            </view>
            <view v-if="msg.image" class="image-container" v-for="(item, imgIndex) in msg.image" :key="imgIndex">
              <image :src="item" class="user-image" mode="widthFix" @click="previewImage(item)" />
            </view>
            <view class="avatar-container">
              <image class="avatar" :src="user.avatar" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-container">
      <!-- 标签 -->
      <view class="tip">
        <view
          :class="['tag', { 'active': selectedTag === 'deepThink' }]"
          @click="handleTagClick('deepThink')"
        >
          🧠 深度思考
        </view>
        <view
          :class="['tag', { 'active': selectedTag === 'search' }]"
          @click="handleTagClick('search')"
        >
          🌐 联网搜索
        </view>
      </view>
      <view class="input-box">
        <!-- 普通输入框 -->
        <view class="upload-icon" @click="uploadImage">
          <text class="plus-icon">+</text>
        </view>
        <view class="input-area">
          <input
            v-model="inputText"
            class="input"
            placeholder="有问题尽管问我"
            @confirm="sendMessage"
          />
        </view>
        <view class="call-btn" @click="voice">
          <uni-icons type="phone" size="24" ></uni-icons>
        </view>
      </view>
    </view>

    <!-- 抽屉组件 -->
    <uni-drawer ref="drawer" mode="right" :width="windowWidth * 0.8">
      <view class="drawer-content">
        <view class="drawer-header">
          <view class="drawer-title">
            <uni-icons type="history" size="24"></uni-icons>
            <text>历史会话</text>
          </view>
          <view class="drawer-close" @click="closeDrawer">
            <uni-icons type="closeempty" size="24"></uni-icons>
          </view>
        </view>
        <scroll-view class="drawer-body" 
		show-scrollbar="false" 
		style="overflow-x: hidden; padding: 20rpx; height: calc(100% - 80rpx);"
		scroll-y
		>
          <view
            v-for="(history, index) in historyMessages"
            :key="index"
            class="history-item"
          >
            <view class="history-time-container">
              <view class="history-time">{{ history.createTime }}</view>
              <view class="delete-icon" @click.stop="deleteHistory(index, history.createTime)">
                <uni-icons type="trash" size="24" color="#ff4d4f"></uni-icons>
              </view>
            </view>
            <view class="history-content" @click="goWatch(history.createTime)">{{ history.aiContent || history.userContent }}</view>
          </view>
        </scroll-view>
      </view>
    </uni-drawer>

    <!-- 反馈弹层 -->
    <view v-if="showFeedbackDialog" class="feedback-dialog">
      <view class="feedback-overlay" @click="closeFeedbackDialog"></view>
      <view class="feedback-content">
        <view class="feedback-header">
          <text>抱歉, 小清 让你有不好的感受</text>
          <view class="close-btn" @click="closeFeedbackDialog">
            <uni-icons type="closeempty" size="24"></uni-icons>
          </view>
        </view>
        <view class="feedback-subheader">请选择理由帮助我们做的更好</view>
        <view class="feedback-options">
          <view 
            class="feedback-option" 
            :class="{ 'active': selectedFeedback === 'understand' }" 
            @click="selectFeedback('understand')"
          >
            没有理解问题
          </view>
          <view 
            class="feedback-option" 
            :class="{ 'active': selectedFeedback === 'complete' }" 
            @click="selectFeedback('complete')"
          >
            没有完成任务
          </view>
          <view 
            class="feedback-option" 
            :class="{ 'active': selectedFeedback === 'fabricate' }" 
            @click="selectFeedback('fabricate')"
          >
            编造事实
          </view>
          <view 
            class="feedback-option" 
            :class="{ 'active': selectedFeedback === 'chatty' }" 
            @click="selectFeedback('chatty')"
          >
            废话太多
          </view>
          <view 
            class="feedback-option" 
            :class="{ 'active': selectedFeedback === 'creative' }" 
            @click="selectFeedback('creative')"
          >
            没有创意
          </view>
          <view 
            class="feedback-option" 
            :class="{ 'active': selectedFeedback === 'style' }" 
            @click="selectFeedback('style')"
          >
            文风不好
          </view>
        </view>
        <view class="feedback-input">
          <textarea 
            v-model="feedbackText" 
            placeholder="更多的建议与意见..." 
            maxlength="150"
          ></textarea>
          <view class="feedback-trash-icon" @click="clearFeedback">
            <uni-icons type="trash" size="20" color="#ccc"></uni-icons>
          </view>
        </view>
        <view class="feedback-submit">
          <button @click="submitFeedback">提交反馈</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, computed, watch } from 'vue';
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from '@/utils/system.js';
import { useInfoStore } from '/store';
import { ApiFeedBack, ApiTextToVoice, ApidelHistory, ApigetAllHistory, ApigetHostoryByTime, Apiclear, ApiAddvoice } from "../api/agent.js";
import { useAuthStore } from "../../store/token.js";
import { ApiGetUser } from '../api/user.js';

const u = useInfoStore();

//请求token
const token = ref(null)
const header = ref([])

// 深度思考
const isThink = ref(false);
// 联网搜索
const search = ref(false);

// 消息数据
const messages = ref([]);

// 历史会话数据
const historyMessages = ref([]);

// 窗口宽度，用于计算抽屉宽度
const windowWidth = ref(375); // 默认宽度

// 用户信息
const user = ref({});

// 获取用户信息
const getUsetInfos = async () => {
  try {
    const res = await ApiGetUser();
    user.value = res;
    u.userInfo = res; // 更新缓存
  } catch (error) {
    console.error("获取用户信息失败:", error);
    uni.showToast({
      title: "获取用户信息失败，请重试",
      icon: "none"
    });
  } 
};

onMounted(() => {
  // 获取窗口宽度
  uni.getSystemInfo({
    success: (res) => {
      windowWidth.value = res.windowWidth;
    }
  });
	// 获取 Pinia store
	const authStore = useAuthStore();
	token.value = authStore.getToken;
	// 初始化 header
	header.value["access-token"] = authStore.getToken;
	// 发送欢迎消息
	sendWelcomeMessage();
  
  //获取用户消息
  user.value = u.userInfo
  if(!user.value)
  {
	  //获取用户信息
	  getUsetInfos()
  }
  
  if(mess.value)
  {
  	 inputText.value = mess.value
  	 sendMessage()
  }
  //获取历史记录
  getAllhistory()
});
const mess = ref("")

onLoad((options) => {
	// 从 options 中获取传递过来的参数
	mess.value = options.content;
})

const sendWelcomeMessage = () => {
  const now = new Date();
  const hour = now.getHours();
  let greeting;

  if (hour >= 5 && hour < 12) {
    greeting = "早上好 ";
  } else if (hour >= 12 && hour < 18) {
    greeting = "下午好 ";
  } else {
    greeting = "晚上好 ";
  }

  const welcomeMessage = {
    id: Date.now(),
    type: 0,
    content: user.value.username 
      ? `${greeting}${user.value.username}，我是你的智能助手小清` 
      : `${greeting}，我是你的智能助手小清`,
    loading: false,
    error: false,
    handUpClicked: false,
    handDownClicked: false
  };
  
  messages.value.push(welcomeMessage);
  scrollToBottom();
};

const inputText = ref('');
const scrollTop = ref(0);
const scrollView = ref(null);
const selectedTag = ref(null);
const aiInputReceived = ref(false);
const image = ref([]);
const drawer = ref(null);
const showFeedbackDialog = ref(false); // 显示反馈弹层
const selectedFeedback = ref(''); // 选中的反馈类型
const feedbackText = ref(''); // 反馈文本
const isProcessing = ref(false); // 添加请求锁

// 发送消息
const sendMessage = async () => {
  if (!inputText.value.trim() || isProcessing.value) return;

  isProcessing.value = true;

  try {
    // 用户消息
    const userMessage = {
      id: Date.now(),
      type: 1,
      content: inputText.value.trim(),
      loading: false,
      error: false,
      handUpClicked: false,
      handDownClicked: false
    };
    messages.value.push(userMessage);

    const currentPrompt = inputText.value.trim();
    inputText.value = '';
    await scrollToBottom();

    // 创建AI消息占位
    const aiMessage = {
      id: Date.now() + 1,
      type: 0,
      content: '',
      loading: true,
      error: false,
      handUpClicked: false,
      handDownClicked: false
    };
    messages.value.push(aiMessage);
    await scrollToBottom();

    // 调用流式请求
    await createStreamConnection(currentPrompt, aiMessage);
  } finally {
    isProcessing.value = false;
  }
};


// 流式请求（WebSocket版）
const createStreamConnection = async (prompt, aiMessage) => {
  try {
    // 构建WebSocket URL
    let wsUrl;
    if (image.value.length > 0) {
         // 处理图片数组
         const imageStr = image.value.join(','); // 拼接为字符串
         const encodedImage = encodeURIComponent(imageStr); // 编码
         
         wsUrl = `ws://localhost:8003/app/chat/image?image=${encodedImage}&prompt=${encodeURIComponent(prompt)}&userId=${user.value.userId}`;
       } else {
         wsUrl = `ws://localhost:8003/app/chat/stream/websocket?prompt=${encodeURIComponent(prompt)}&isThink=${isThink.value}&search=${search.value}`;
       }

    // 创建WebSocket连接
    const socket = new WebSocket(wsUrl);
    
    // 添加认证头信息
    socket.onopen = () => {
        socket.send(JSON.stringify({
            type: 'auth',
            token: token.value
        }));
    };

    // 接收消息处理
    let currentContent = '';
    const aiMsgIndex = messages.value.findIndex(msg => msg.id === aiMessage.id);
    
    socket.onmessage = (event) => {
      if (aiMsgIndex !== -1) {
        // 追加接收到的内容
        currentContent += event.data;
        messages.value[aiMsgIndex].content = currentContent;
        scrollToBottom();
      }
	 scrollToBottom();
    };

    // 连接关闭处理
    socket.onclose = (event) => {
      if (aiMsgIndex !== -1) {
        messages.value[aiMsgIndex].loading = false; // 关闭加载状态
      }
    };

    // 错误处理
    socket.onerror = (error) => {
      console.error('WebSocket错误:', error);
      if (aiMsgIndex !== -1) {
        messages.value[aiMsgIndex].error = true;
        messages.value[aiMsgIndex].content = 'WebSocket连接失败，请重试';
        messages.value[aiMsgIndex].loading = false;
      }
    };

    // 清除图像
    image.value = [];
  } catch (error) {
    console.error('Stream error:', error);
    const aiMsgIndex = messages.value.findIndex(msg => msg.id === aiMessage.id);
    if (aiMsgIndex !== -1) {
      messages.value[aiMsgIndex].error = true;
      messages.value[aiMsgIndex].content = '请求失败，请重试';
      messages.value[aiMsgIndex].loading = false;
    }
  }
};


// 滚动到底部
const scrollToBottom = async () => {
  await nextTick();
  scrollTop.value = Date.now();
};

// 处理标签点击
const handleTagClick = (tag) => {
  if (selectedTag.value === tag) {
    selectedTag.value = null;
    return;
  }
  selectedTag.value = tag;

  let tipMessage = '';
  if (tag === 'deepThink') {
    tipMessage = '深度思考模式已开启，我将进行深入思考后回复您';
    isThink.value = true;
    search.value = false;
  } else if (tag === 'search') {
    tipMessage = '联网搜索模式已开启，我将联网查询相关信息后回复您';
    isThink.value = false;
    search.value = true;
  }

  messages.value.push({
    type: 0,
    content: tipMessage,
    loading: false,
    error: false,
    handUpClicked: false,
    handDownClicked: false
  });

  scrollToBottom();
};

const img = ref([]);

// 图片上传
const uploadImage = () => {
  if (image.value.length === 1) {
    uni.showToast({
      title: '一次只能上传一张图片',
      icon: 'none'
    });
    return;
  }
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: (res) => {
      img.value.push(res.tempFilePaths[0]);
      messages.value.push({
        id: Date.now(),
        type: 1,
        image: img.value,
        isImage: true,
        handUpClicked: false,
        handDownClicked: false
      });
      inputText.value = '';
      aiInputReceived.value = false;
      scrollToBottom();
      uploadFile(res.tempFilePaths[0]);
    }
  });
};

const uploadFile = (val) => {
  uni.uploadFile({
    // url: 'http://47.99.64.234:8000/app/file/upload',
	url: 'api/app/file/upload',
    filePath: val,
    name: 'file',
    header: header.value,
    success: (uploadRes) => {
      const data = JSON.parse(uploadRes.data);
      if (data.code === 200) {
        image.value.push(data.data);
      }
    }
  });
};

// 清除对话
const clearChat = () => {
  uni.showModal({
    title: '提示',
    content: '是否清除所有对话？',
    success: async(res) => {
      if (res.confirm) {
        messages.value = [];
        sendWelcomeMessage();
        await Apiclear();
      }
    }
  });
};

// 图片预览
const previewImage = (imageSrc) => {
  /* #ifdef H5 */
  // H5 环境下使用浏览器的图片预览功能
  window.open(imageSrc);
  /* #endif */

  /* #ifdef APP */
  // App 环境下使用 uni.previewImage API
  uni.previewImage({
    urls: [imageSrc],
    current: imageSrc
  });
  /* #endif */
};

// 退出
const goBack = () => {
  uni.navigateBack();
};

// 打开抽屉
const toggleDrawer = () => {
  drawer.value.open();
};

// 获取所有的历史记录
const getAllhistory = async () => {
  let res = await ApigetAllHistory();
  historyMessages.value = res;
};

// 关闭抽屉
const closeDrawer = () => {
  drawer.value.close();
};

// 删除历史会话
const deleteHistory = (index, time) => {
  uni.showModal({
    title: '提示',
    content: '是否删除该历史会话？',
    success: async(res) => {
      if (res.confirm) {
        historyMessages.value.splice(index, 1);
        await ApidelHistory(time);
      }
    }
  });
};

// 获取历史记录
const goWatch = async (time) => {
  let res = await ApigetHostoryByTime(time);
  messages.value = res;
  scrollToBottom();
  closeDrawer();
};

// 图标点击处理函数
const handleHandUpIconClick = (msg, index) => {
  if (!msg.loading && !msg.handUpClicked && !msg.handDownClicked) {
    msg.handUpClicked = true;
    uni.showToast({
      title: '谢谢你的喜欢',
      icon: 'none'
    });
  }
};

const handleHandDownIconClick = (msg, index) => {
  if (!msg.loading && !msg.handUpClicked && !msg.handDownClicked) {
      showFeedbackDialog.value = true; // 显示反馈弹层
  }
};

const handleAttachmentIconClick = (msg, index) => {
  if (msg.content && !msg.loading && !msg.error) {
    /* #ifdef H5 */
    navigator.clipboard.writeText(msg.content).then(() => {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      });
    }).catch(err => {
      console.error('复制失败:', err);
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      });
    });
    /* #endif */

    /* #ifdef APP */
    uni.setClipboardData({
      data: msg.content,
      success: function () {
        uni.showToast({
          title: '复制成功',
          icon: 'none'
        });
      },
      fail: function (err) {
        console.error('复制失败:', err);
        uni.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
    });
    /* #endif */
  }
};

const sound = ref({
  textToSpeech: ""
});

// 语音播放方法
const speakVoice = async (msg) =>   {
if (!msg || msg.trim() === '') {
    console.warn('语音播放内容为空');
    return;
  }

  try {
    // 调用文本转语音API，获取音频文件路径
    let audioPath = await ApiTextToVoice(msg);
    console.log('获取到的音频文件路径：', audioPath);

    // 创建音频上下文
    const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.src = audioPath; // 设置音频文件路径


    // 监听播放结束事件
    innerAudioContext.onEnded(() => {
      innerAudioContext.destroy(); // 播放完成后销毁音频上下文
    });


    // 监听播放错误事件
    innerAudioContext.onError((error) => {
      console.error('播放失败：', error);
      uni.showToast({
        title: '播放失败，请重试',
        icon: 'none'
      });
    });

    // 播放音频
    innerAudioContext.play();
  } catch (error) {
    console.error('获取音频文件失败：', error);
    uni.showToast({
      title: '获取音频文件失败，请重试',
      icon: 'none'
    });
  }
};

// 图标点击处理函数，包含语音合成调用
const handleSoundIconClick = (msg, index) => {
  if (msg && msg.content && !msg.loading) {
    speakVoice(msg.content);
  }
};

// 语音对话
const voice = () => {
  uni.navigateTo({
    url: "/pages/chat/smartVoice"
  })
};

// 关闭反馈弹窗
const closeFeedbackDialog = () => {
  showFeedbackDialog.value = false;
  selectedFeedback.value = '';
  feedbackText.value = '';
};

// 清除反馈文本
const clearFeedback = () => {
  feedbackText.value = '';
};
</script>

<style scoped lang="less">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;

  .titleBar {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    height: 88rpx;
  }

  .box {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;

    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }

    .left-icon, .right-icons {
      display: flex;
      align-items: center;
    }

    .left-icon {
      margin-right: 20rpx;
    }

    .right-icons {
      margin-left: 20rpx;
    }
  }
}

.chat-container {
  flex: 1;
  padding: 20rpx;
  overflow: auto;
  background-color: #f0f2f5;
  -webkit-overflow-scrolling: touch;
}

.message-box {
  margin-top: 15px;
  display: flex;
  max-width: 100%;
}

.ai {
  align-items: flex-start;
  justify-content: flex-start;

  .avatar-container {
    margin-right: 15rpx;
    display: flex;
    align-items: flex-start;
  }

  .avatar {
    width: 85rpx;
    height: 85rpx;
    border-radius: 42.5rpx;
  }

  .bubble-container {
	margin-top: 15px;
    display: flex;
    flex-direction: column;
    max-width: 80%; /* 增加AI消息框宽度 */
    background-color: #e6f7ff;
    border-radius: 20rpx 20rpx 20rpx 5rpx; /* 调整圆角 */
    padding: 25rpx;
    box-shadow: 0 5rpx 15rpx rgba(24, 144, 255, 0.2);
    margin-right: 40rpx; /* AI消息与右侧边框的距离 */
  }

  .bubble {
    max-width: 100%;
    color: #1890ff;
    font-size: 32rpx; /* 增大AI消息字体 */
  }
}

.user {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-right: 30rpx;
}

.user .bubble-container {
  display: flex;
  flex-direction: column;
  max-width: 80%; /* 增加用户消息框宽度 */
  background-color: #f5f5f5;
  border-radius: 20rpx 20rpx 5rpx 20rpx; /* 调整圆角 */
  padding: 25rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}

.user .avatar-container {
  margin-left: 10rpx; /* 用户头像与消息框的距离 */
  margin-right: 0; /* 调整头像右侧间距 */
  align-self: flex-end; /* 头像对齐到右侧 */
}

.user .avatar {
  width: 85rpx;
  height: 85rpx;
  border-radius: 42.5rpx;
  background-color: #f0f0f0;
}

.user .bubble {
  font-size: 32rpx; /* 增大用户消息字体 */
}

.voice-message {
  display: flex;
  align-items: center;
}

.voice-length {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.user .image-container {
  display: flex;
  align-items: flex-start; /* 与头像顶部对齐 */
  justify-content: flex-end;
  max-width: 75%;
}

.user-image {
  max-width: 60%;
  border-radius: 15rpx;
  margin-bottom: 10rpx;
}

.input-container {
  padding: 20rpx;
  background: white;
  box-shadow: 0 -5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.tip {
  display: flex;
  justify-content: center;
  margin-bottom: 15rpx;
}

.tag {
  padding: 10rpx 30rpx;
  margin: 0 10rpx;
  border-radius: 30rpx;
  font-size: 30rpx; /* 增大标签字体 */
  background-color: #f0f0f0;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;

  &.active {
    background-color: #e6f7ff;
    color: #1890ff;
    font-weight: bold;
    box-shadow: 0 5rpx 15rpx rgba(24, 144, 255, 0.2);
  }
}

.input-box {
  display: flex;
  align-items: center;
}

.input-area {
  display: flex;
  align-items: center;
  height: 85rpx;
  background-color: #f5f5f5; /* 浅灰色背景 */
  border-radius: 40rpx;
  padding: 0 20rpx;
  position: relative;
  flex: 1;
}

.upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rpx;
  height: 50rpx;
  margin-right: 15rpx;
  color: #666;
}

.plus-icon {
  font-size: 36px;
}

.input {
  flex: 1;
  height: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  color: #333;
  font-size: 32rpx; /* 增大输入框字体 */
}

.input::placeholder {
  color: #999;
}

.call-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  margin-left: 10rpx;
}

.ai-icons {
  display: flex;
  margin-top: 15rpx;
  margin-left: 10rpx;

  .uni-icons {
    margin-right: 20rpx;
    cursor: pointer;
    width: 50rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f0f0f0;
    transition: all 0.3s;
  }

  .uni-icons:hover {
    background-color: #e6f7ff;
  }
}

.rotating-icon {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #ccc;
  border-top-color: #1890ff;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
  margin-left: 10rpx;
}

.error-tip {
  color: #ff4d4f;
  margin-left: 10rpx;
  font-size: 28rpx;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 抽屉组件样式 */
.drawer-content {
  height: 100%;
  background-color: #fff;
  margin-top: 30px;
  padding: 20rpx;
  box-sizing: border-box;
  box-shadow: -5rpx 0 15rpx rgba(0, 0, 0, 0.05);
  padding-bottom: 50px; /* 距离底部一定的距离 */
}

.drawer-body {
  height: calc(100% - 80rpx);
  overflow-y: auto;
}

/* 隐藏滚动条 */
.drawer-body::-webkit-scrollbar {
  display: none;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.drawer-title {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;

  text {
    margin-left: 10rpx;
  }
}

.history-item {
  padding: 20rpx;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  background-color: #f9f9f9;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;

  &:hover {
    background-color: #f0f5ff;
    box-shadow: 0 5rpx 15rpx rgba(24, 144, 255, 0.1);
  }
}

.history-time-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.history-time {
  font-size: 28rpx;
  color: #666;
}

.delete-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.history-content {
  font-size: 32rpx;
  color: #333;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.feedback-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.feedback-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.feedback-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  box-sizing: border-box;
  box-shadow: 0 -5rpx 20rpx rgba(0, 0, 0, 0.1);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  text-align: center;
  color: #333;
}

.close-btn {
  cursor: pointer;
}

.feedback-subheader {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
  text-align: center;
}

.feedback-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 30rpx;
  justify-content: center;
}

.feedback-option {
  padding: 15rpx 30rpx;
  background-color: #f0f0f0;
  border-radius: 10rpx;
  font-size: 28rpx;
  cursor: pointer;
  transition: all 0.3s;
}

.feedback-option:hover {
  background-color: #e6e6e6;
}

.feedback-option.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.feedback-input {
  position: relative;
  margin-bottom: 30rpx;
}

.feedback-input textarea {
  width: 100%;
  height: 200rpx;
  padding: 15rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  resize: none;
}

.feedback-trash-icon {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  cursor: pointer;
}

.feedback-submit {
  text-align: center;
}

.feedback-submit button {
  width: 100%;
  padding: 20rpx;
  border: none;
  background-color: #47e09a;
  color: white;
  border-radius: 40px; /* 添加圆角 */
  font-size: 28rpx;
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: 0 5rpx 15rpx rgba(71, 224, 154, 0.3);
}

.feedback-submit button:hover {
  background-color: #37d086;
}

/* 响应式布局 */
@media screen and (max-width: 600px) {
  .input {
    font-size: 28rpx;
  }
  
  .bubble {
    font-size: 28rpx;
  }
  
  .tag {
    font-size: 24rpx;
    padding: 8rpx 20rpx;
  }
}
/* 新增样式 */
.user-image {
  max-width: 60%;
  height: auto;
  border-radius: 15rpx;
  margin-bottom: 10rpx;
}

.close-btn {
  cursor: pointer;
}
</style>